<template>
  <div id="toolManager">
    <!-- 搜索表单 -->
    <a-form style="padding: 30px 50px" :model="queryParams" layout="inline">
      <a-form-item label="工具名称">
        <a-input
          v-model:value="queryParams.name"
          placeholder="请输入工具名称"
        />
      </a-form-item>
      <a-form-item label="工具状态">
        <a-select
          v-model:value="queryParams.status"
          placeholder="请选择"
          style="width: 183px"
        >
          <a-select-option
            v-for="item in options"
            :key="item.value"
            :value="item.value"
          >
            {{ item.label }}
          </a-select-option>
        </a-select>
      </a-form-item>

      <!-- 搜索和重置按钮 -->
      <a-form-item>
        <a-button type="primary" @click="handleSearch">搜索</a-button>
        <a-button style="margin-left: 10px" @click="handleReset">重置</a-button>
      </a-form-item>
    </a-form>

    <a-table
      size="small"
      :columns="columns"
      :data-source="tableData"
      :pagination="pagination"
    >
      <template #headerCell="{ column }">
        <template v-if="column.key === 'toolName'">
          <span>
            <smile-outlined />
            工具名称
          </span>
        </template>
      </template>
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'logo'">
          <span>
            <a-image style="width: 50px; height: 50px" :src="record.logo" />
          </span>
        </template>
        <template v-if="column.key === 'toolName'">
          <a>
            {{ record.name }}
          </a>
        </template>
        <template v-if="column.key === 'tags'">
          <span>
            <a-tag
              v-for="tag in record.tags"
              :key="tag"
              :bordered="false"
              color="cyan"
            >
              {{ tag }}
            </a-tag>
          </span>
        </template>
        <template v-if="column.key === 'user'">
          <span>
            {{ record.user.userName }}
          </span>
        </template>
        <template v-if="column.key === 'status'">
          <span>
            <a-tag :bordered="false" color="processing">
              {{ record.status === 0 ? "关闭" : "正常" }}
            </a-tag>
          </span>
        </template>
        <template v-else-if="column.key === 'operation'">
          <span>
            <a-divider type="vertical" />
            <a-button
              v-if="record.status === 0"
              type="primary"
              style="background-color: #ff5800"
              @click="handleOnline(record)"
              >上线</a-button
            >
            <a-button
              v-if="record.status === 1"
              type="primary"
              style="background-color: #707374"
              @click="handleOffline(record)"
              >下线</a-button
            >
            <a-divider type="vertical" />
            <a-button type="primary" @click="handleEdit(record)">编辑</a-button>
            <a-divider type="vertical" />
            <a-button type="primary" danger @click="handleDelete(record)"
              >删除</a-button
            >
          </span>
        </template>
      </template>
    </a-table>
  </div>
</template>

<script lang="ts" setup>
import { createVNode, onBeforeMount, reactive, ref } from "vue";
import { offlineTool, onlineTool, toolDelete, toolVOByPage } from "@/api/tool";
import { message, Modal } from "ant-design-vue";
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
import router from "@/router";

const tableData = ref([]);
const columns = reactive([
  {
    title: "图标",
    dataIndex: "logo",
    key: "logo",
    align: "center",
  },
  {
    name: "工具名称",
    dataIndex: "toolName",
    key: "toolName",
    align: "center",
  },
  {
    title: "标签",
    key: "tags",
    dataIndex: "tags",
    align: "center",
  },
  {
    title: "创建人",
    dataIndex: "user",
    key: "user",
    align: "center",
  },
  {
    title: "描述",
    dataIndex: "description",
    key: "description",
    align: "center",
  },
  {
    title: "状态",
    dataIndex: "status",
    key: "status",
    align: "center",
  },
  {
    title: "操作",
    key: "operation",
    dataIndex: "operation",
    align: "center",
  },
]);

// 搜索参数定义
interface queryParamsBody {
  name: string;
  status: number;
  current: number;
  pageSize: number;
}

// 搜索参数
const queryParams = reactive<queryParamsBody>({
  name: "",
  status: -1,
  current: 0,
  pageSize: 10,
});

// 搜索方法
const handleSearch = () => {
  try {
    queryParams.current = 0;
    queryParams.pageSize = 10;
    pagination.current = 1;
    pagination.pageSize = 10;
    getData();
    message.success("搜索成功");
  } catch (err) {
    message.error("搜索失败");
  }
};

// 工具类型选项
const options = ref([
  { value: -1, label: "请选择" },
  { value: 0, label: "关闭" },
  { value: 1, label: "正常" },
]);

// 重置方法
const handleReset = () => {
  // 重置表单
  try {
    queryParams.status = -1;
    queryParams.name = "";
    queryParams.current = 0;
    queryParams.pageSize = 10;
    pagination.current = 1;
    pagination.pageSize = 10;
    getData();
  } catch (err) {
    message.success("重置失败");
  }
  message.success("重置成功");
};

//生命周期
onBeforeMount(() => {
  //获取数据
  getData();
});

const getData = async () => {
  toolVOByPage(queryParams)
    .then((res: any) => {
      if (res.code == 0) {
        tableData.value = res.data.records;
        pagination.total = res.data.total;
      } else {
        message.error("获取数据失败");
      }
    })
    .catch((err) => {
      message.error("系统错误，" + err.message);
    });
};

// 工具上线
const handleOnline = (record: any) => {
  let params = {
    id: record.id,
  };
  onlineTool(params)
    .then((res: any) => {
      if (res.code == 0) {
        message.success("上线成功");
        getData();
      } else {
        message.error("上线失败");
      }
    })
    .catch((err) => {
      message.error("上线失败，" + err.message);
    });
};

// 工具下线
const handleOffline = (record: any) => {
  let params = {
    id: record.id,
  };
  offlineTool(params)
    .then((res: any) => {
      if (res.code == 0) {
        message.success("下线成功");
        getData();
      } else {
        message.error("下线失败");
      }
    })
    .catch((err) => {
      message.error("下线失败，" + err.message);
    });
};

// 工具编辑
const handleEdit = (record: any) => {
  router.push(`/toolEditPage/${record.id}`);
};

// 工具删除
const handleDelete = (record: any) => {
  Modal.confirm({
    title: `删除`,
    icon: createVNode(ExclamationCircleOutlined),
    content: `确定要删除${record.name}工具吗?`,
    onOk() {
      let params = {
        id: record.id,
      };
      toolDelete(params)
        .then((res: any) => {
          if (res.code == 0) {
            message.success("删除成功");
            getData();
          } else {
            message.error("删除失败");
          }
        })
        .catch((err) => message.error("删除失败"));
    },
    onCancel() {
      message.info("取消删除");
    },
  });
};

// 分页配置类型定义
interface PaginationProps {
  current: number;
  pageSize: number;
  total: number;
  showSizeChanger?: boolean;
  pageSizeOptions?: number[];
  showQuickJumper?: boolean;
  showTotal?: (total: number, range: [number, number]) => string;
  onChange?: object;
}

// 监听分页变化
const onPaginationChange = (page: number, pageSize: number) => {
  //更新分页参数
  pagination.current = page;
  pagination.pageSize = pageSize;
  //更新查询参数
  queryParams.current = page;
  queryParams.pageSize = pageSize;
  //获取数据
  getData();
};

// 分页配置
const pagination = reactive<PaginationProps>({
  current: 1, // 当前页数
  pageSize: 10, // 每页条数
  total: 0, // 数据总数，用于计算总页数
  showSizeChanger: false, // 是否显示每页显示个数选择器
  pageSizeOptions: [10, 20, 30, 40], // 每页显示个数选择器的选项设置
  showQuickJumper: false, // 是否显示快速跳转按钮
  showTotal: (total: number) => `共 ${total} 条数据`, // 自定义显示总数
  onChange: onPaginationChange, // 页码改变时的回调函数
});
</script>

<style scoped></style>
